import Taro from '@tarojs/taro'
import React from 'react'
import { View } from '@tarojs/components'
import { AtTabs, AtTabsPane } from 'taro-ui'
import {NoPayOrderList} from './NoPayOrderList'
import {NoFinishOrderList} from './NoFinishOrderList'
import {FinishOrderList} from './FinishOrderList'
import {CancelOrderList} from './CancelOrderList'


import "taro-ui/dist/style/components/tabs.scss"

class OrderTabList extends React.Component{
  constructor () {
    super(...arguments)
    this.state = {
      current: 0
    }
  }
  handleClick (value) {
    this.setState({
      current: value
    })
  }

  render(){
    const tabList = [{ title: '待支付' }, { title: '待就诊' }, { title: '已完成' }, { title: '已取消' }]
    return(
      <AtTabs current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
        <AtTabsPane current={this.state.current} index={0} >
          <View>
            <NoPayOrderList data_0={this.props.has_pay_0_data}></NoPayOrderList>
          </View>
        </AtTabsPane>
      <AtTabsPane current={this.state.current} index={1}>
        <View>
          <NoFinishOrderList data_1={this.props.has_pay_1_data}></NoFinishOrderList>
        </View>
      </AtTabsPane>
      <AtTabsPane current={this.state.current} index={2}>
        <View>
          <FinishOrderList data_2={this.props.has_pay_2_data}></FinishOrderList>
        </View>
      </AtTabsPane>
      <AtTabsPane current={this.state.current} index={3}>
        <View>
          <CancelOrderList data_3={this.props.has_pay_3_data}></CancelOrderList>
        </View>
      </AtTabsPane>
      </AtTabs>
    )
  }
}

export {OrderTabList}